<template>
    <view class="title">证明材料</view>
    <view class="certificate-list">
        <navigator class="certificate-item" v-for="(item, index) in certificateList" :key="index" :url="item.url">
            <view>{{item.name}}</view>
            <i class="iconfont icon-xiangyoujiantou" style="font-size: 40rpx;"></i>
        </navigator>
    </view>
    <view class="title">疫苗记录</view>
    <view class="mune" v-if="vaccineData && vaccineData.length > 0" v-for="(item,index) in vaccineData" :key="index">
        <view class="mune-titlie">
            <image src="@/static/cow/node.png" alt="" style="height: 20rpx;width: 20rpx;" />
            <view style="font-size: 24rpx;">{{item.F_CreateTime}}</view>
        </view>
        <view class="mune-data">
            <view>
                <view>疫苗批次号: {{item.F_Batch}}</view>
                <view>疫苗名称: {{item.F_Title}}</view>
                <view>操作人员: {{item.F_Name || '无'}}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getVaccine
	} from '@/utils/api/Livestock.js'
	const fId = ref('')
	// 疫苗数据
	const vaccineData = ref(null);

	// 证明材料数据
	const certificateList = ref([{
			name: '动物诊疗许可证',
		},
		{
			name: '动物防疫合格证',
		},
		{
			name: '疫苗生产批号和有效期证明',
		},
		{
			name: '疫苗运输和储存温度记录',
		},
		{
			name: '免疫接种记录',
		}
	]);
	
	
	onLoad((options) => {
		fId.value = options.fId
	})
	
	onMounted(async () => {
		const res = await getVaccine({
			F_liveid: fId.value
		})
		if(res.code==200){
			vaccineData.value=res.data
			
		}
	})
</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';
	.title {
		width: 100%;
		height: 80rpx;
		background-color: #EFEFEF;
		padding-left: 20rpx;
		line-height: 80rpx;
	}

	.mune-titlie {
		width: 350rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 40rpx;
	}

	.mune-data {
		margin-left: 50rpx;
		margin-bottom: 20rpx;
		border-left: 1px solid #333;
	}

	.mune-data view {
		font-size: 20rpx;
		line-height: 30rpx;
		margin-left: 20rpx;
		padding: 10rpx 0;
	}

	.certificate-list {
		margin: 20rpx 0;
	}

	.certificate-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #e0e0e0;
	}
</style>